<template>
	<view class="card" :style="{width: width}" @click="gotoTv()">
		<u--image :showLoading="true" :src="item.tvImage" :width="width" :height="height" radius="24"></u--image>
		<view class="card-info">
			<view class="card-title">{{item.tvName}}</view>
      <view class="card-desc" v-if="item.classify">{{item.classify}}</view>
      <view class="card-desc" v-if="item.series">观看至第{{item.series}}集</view>
		</view>
		<view class="views" v-if="item.view >= 0 && view">
			<u--image :showLoading="true" src="/static/benefit/path.png" width="18rpx" height="24rpx"
				style="margin-right: 5rpx;"></u--image>
			{{item.view >= 10000 ? (item.view/10000).toFixed(1) + '万' : item.view}}播放
		</view>
    <view class="hot" v-if="item.isHot === 1"></view>
	</view>
</template>
<script>
  import {Api} from "../service/api";
  import {gotoPage} from "../utils/common";

  export default {
		name: "videoCard",
		methods: {
			async gotoTv() {
        // gotoPage('/pages/player/player?tvId='+ this.item.tvId)

        if(this.item.tvId) {
          gotoPage('/pages/player/player?tvId='+ this.item.tvId)
        }else if(this.item.id) {
          gotoPage('/pages/player/player?tvId='+ this.item.id)
        }
      }
		},
		props: {
			item: {
				type: Object,
				default: () => {}
			},
			width: {
				type: String,
				default: '216.8rpx'
			},
			height: {
				type: String,
				default: '298.2rpx'
			},
      view: {
        type: Boolean,
        default: true
      }
		},
	}
</script>


<style scoped lang="scss">
	.card {
		display: flex;
		flex-direction: column;
		width: 216.8rpx;
		margin-bottom: 10rpx;
		position: relative;

		.card-info {
			margin-top: 10rpx;

			.card-title {
				color: #4B4A4A;
				font-size: 28rpx;
        width: 190rpx;
        display: -webkit-box;
        overflow: hidden;
        white-space: normal !important;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
			}

			.card-type {
				display: flex;
				color: #9B9B9B;
				font-size: 20rpx;
			}

      .card-desc{
        color: #9B9B9B;
        font-size: 20rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }
		}

		.views {
			font-family: 'pc', sans-serif;
			position: absolute;
			color: #ffffff;
			bottom: 80rpx;
			right: 20rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-weight: 600;
		}

    .hot{
      &::after {
        content: '新剧';
        position: absolute;
        top: 0;
        right: 0;
        color: #FFFFFF;
        z-index: 2;
        width: 70rpx;
        height: 34rpx;
        border-radius: 0 16rpx 0 16rpx;
        background-color: #E81F4B;
        text-align: center;
        font-size: 24rpx;
      }
    }
	}
</style>
